<template>
  <div class="check-tasks-container">
    <el-card shadow="never" class="header-card">
      <div class="page-header">
        <div class="header-content">
          <el-icon class="header-icon" :size="28"><DocumentChecked /></el-icon>
          <div class="header-text">
            <h2>盘点任务单</h2>
            <p>创建和管理库存盘点任务</p>
          </div>
        </div>
        <div class="header-actions">
          <el-button type="primary" @click="showCreateDialog = true">
            <el-icon><Plus /></el-icon>
            新建盘点任务
          </el-button>
        </div>
      </div>
    </el-card>

    <!-- 统计卡片 -->
    <div class="stats-row">
      <el-card shadow="hover" class="stat-card" @click="filterStatus = ''">
        <div class="stat-content">
          <el-icon class="stat-icon" :size="40" color="#409EFF"><Document /></el-icon>
          <div class="stat-info">
            <div class="stat-value">{{ stats.total }}</div>
            <div class="stat-label">全部任务</div>
          </div>
        </div>
      </el-card>
      <el-card shadow="hover" class="stat-card" @click="filterStatus = 'pending'">
        <div class="stat-content">
          <el-icon class="stat-icon" :size="40" color="#E6A23C"><Clock /></el-icon>
          <div class="stat-info">
            <div class="stat-value">{{ stats.pending }}</div>
            <div class="stat-label">待盘点</div>
          </div>
        </div>
      </el-card>
      <el-card shadow="hover" class="stat-card" @click="filterStatus = 'inProgress'">
        <div class="stat-content">
          <el-icon class="stat-icon" :size="40" color="#409EFF"><Loading /></el-icon>
          <div class="stat-info">
            <div class="stat-value">{{ stats.inProgress }}</div>
            <div class="stat-label">盘点中</div>
          </div>
        </div>
      </el-card>
      <el-card shadow="hover" class="stat-card" @click="filterStatus = 'completed'">
        <div class="stat-content">
          <el-icon class="stat-icon" :size="40" color="#67C23A"><CircleCheck /></el-icon>
          <div class="stat-info">
            <div class="stat-value">{{ stats.completed }}</div>
            <div class="stat-label">已完成</div>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 筛选和搜索 -->
    <el-card shadow="never" class="filter-card">
      <el-form :inline="true" :model="searchForm">
        <el-form-item label="任务单号">
          <el-input v-model="searchForm.taskNo" placeholder="请输入任务单号" clearable style="width: 200px" />
        </el-form-item>
        <el-form-item label="任务状态">
          <el-select v-model="searchForm.status" placeholder="全部状态" clearable style="width: 150px">
            <el-option label="待盘点" value="pending" />
            <el-option label="盘点中" value="inProgress" />
            <el-option label="已完成" value="completed" />
            <el-option label="已取消" value="cancelled" />
          </el-select>
        </el-form-item>
        <el-form-item label="盘点类型">
          <el-select v-model="searchForm.type" placeholder="全部类型" clearable style="width: 150px">
            <el-option label="全盘" value="full" />
            <el-option label="抽盘" value="sample" />
            <el-option label="循环盘点" value="cycle" />
            <el-option label="动态盘点" value="dynamic" />
          </el-select>
        </el-form-item>
        <el-form-item label="仓库">
          <el-select v-model="searchForm.warehouseId" placeholder="全部仓库" clearable style="width: 150px">
            <el-option
              v-for="warehouse in warehouses"
              :key="warehouse.id"
              :label="warehouse.name"
              :value="warehouse.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">
            <el-icon><Search /></el-icon>
            搜索
          </el-button>
          <el-button @click="handleReset">
            <el-icon><Refresh /></el-icon>
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 任务列表 -->
    <el-card shadow="never">
      <el-table :data="filteredTasks" stripe border style="width: 100%">
        <el-table-column prop="taskNo" label="任务单号" width="180" fixed>
          <template #default="{ row }">
            <el-link type="primary" @click="handleViewTask(row)">{{ row.taskNo }}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="taskName" label="任务名称" min-width="180" />
        <el-table-column prop="type" label="盘点类型" width="120">
          <template #default="{ row }">
            <el-tag :type="getTypeTagType(row.type)">{{ getTypeName(row.type) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="warehouseName" label="盘点仓库" width="150" />
        <el-table-column prop="status" label="任务状态" width="120">
          <template #default="{ row }">
            <el-tag :type="getStatusTagType(row.status)">{{ getStatusName(row.status) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="planStartDate" label="计划开始时间" width="180" />
        <el-table-column prop="planEndDate" label="计划结束时间" width="180" />
        <el-table-column prop="actualStartDate" label="实际开始时间" width="180" />
        <el-table-column prop="responsiblePerson" label="负责人" width="120" />
        <el-table-column prop="sheetCount" label="盘点单数" width="100" align="center">
          <template #default="{ row }">
            <el-link type="primary" @click="handleViewSheets(row)">{{ row.sheetCount || 0 }}张</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="totalDiffAmount" label="任务盈亏" width="150" align="right">
          <template #default="{ row }">
            <span :class="getDiffClass(row.totalDiffAmount || 0)" class="diff-amount">
              {{ (row.totalDiffAmount || 0) > 0 ? '+' : '' }}¥{{ Math.abs(row.totalDiffAmount || 0).toLocaleString() }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="progress" label="盘点进度" width="150">
          <template #default="{ row }">
            <el-progress :percentage="row.progress" :status="row.progress === 100 ? 'success' : ''" />
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="180" />
        <el-table-column label="操作" width="300" fixed="right">
          <template #default="{ row }">
            <el-button link type="primary" @click="handleViewTask(row)" size="small">
              <el-icon><View /></el-icon>
              查看
            </el-button>
            <el-button link type="primary" @click="handleStartCheck(row)" size="small" v-if="row.status === 'pending'">
              <el-icon><VideoPlay /></el-icon>
              开始盘点
            </el-button>
            <el-button link type="success" @click="handleCompleteCheck(row)" size="small" v-if="row.status === 'inProgress'">
              <el-icon><Select /></el-icon>
              完成
            </el-button>
            <el-button link type="warning" @click="handleEditTask(row)" size="small" v-if="row.status === 'pending'">
              <el-icon><Edit /></el-icon>
              编辑
            </el-button>
            <el-button link type="danger" @click="handleCancelTask(row)" size="small" v-if="row.status !== 'completed' && row.status !== 'cancelled'">
              <el-icon><Close /></el-icon>
              取消
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination
          v-model:current-page="pagination.page"
          v-model:page-size="pagination.pageSize"
          :total="pagination.total"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handlePageChange"
          @current-change="handlePageChange"
        />
      </div>
    </el-card>

    <!-- 新建/编辑任务对话框 -->
    <el-dialog
      v-model="showCreateDialog"
      :title="currentTask ? '编辑盘点任务' : '新建盘点任务'"
      width="800px"
      destroy-on-close
    >
      <el-form :model="taskForm" :rules="taskRules" ref="taskFormRef" label-width="120px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="任务名称" prop="taskName">
              <el-input v-model="taskForm.taskName" placeholder="请输入任务名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="盘点类型" prop="type">
              <el-select v-model="taskForm.type" placeholder="请选择盘点类型" style="width: 100%">
                <el-option label="全盘" value="full">
                  <div class="option-with-desc">
                    <span>全盘</span>
                    <span class="option-desc">盘点所有商品</span>
                  </div>
                </el-option>
                <el-option label="抽盘" value="sample">
                  <div class="option-with-desc">
                    <span>抽盘</span>
                    <span class="option-desc">随机抽取部分商品盘点</span>
                  </div>
                </el-option>
                <el-option label="循环盘点" value="cycle">
                  <div class="option-with-desc">
                    <span>循环盘点</span>
                    <span class="option-desc">按周期定期盘点</span>
                  </div>
                </el-option>
                <el-option label="动态盘点" value="dynamic">
                  <div class="option-with-desc">
                    <span>动态盘点</span>
                    <span class="option-desc">实时动态盘点</span>
                  </div>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="盘点仓库" prop="warehouseId">
              <el-select v-model="taskForm.warehouseId" placeholder="请选择仓库" style="width: 100%">
                <el-option
                  v-for="warehouse in warehouses"
                  :key="warehouse.id"
                  :label="warehouse.name"
                  :value="warehouse.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="负责人" prop="responsiblePerson">
              <el-input v-model="taskForm.responsiblePerson" placeholder="请输入负责人" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="计划开始时间" prop="planStartDate">
              <el-date-picker
                v-model="taskForm.planStartDate"
                type="datetime"
                placeholder="选择开始时间"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="计划结束时间" prop="planEndDate">
              <el-date-picker
                v-model="taskForm.planEndDate"
                type="datetime"
                placeholder="选择结束时间"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="任务说明" prop="remark">
          <el-input
            v-model="taskForm.remark"
            type="textarea"
            :rows="3"
            placeholder="请输入任务说明（选填）"
          />
        </el-form-item>

        <el-form-item label="盘点范围" v-if="taskForm.type !== 'full'">
          <el-radio-group v-model="taskForm.scopeType">
            <el-radio label="category">按分类</el-radio>
            <el-radio label="products">指定商品</el-radio>
          </el-radio-group>
          <div style="margin-top: 10px;" v-if="taskForm.scopeType === 'products'">
            <el-button size="small" @click="showProductSelector = true">
              <el-icon><Plus /></el-icon>
              选择商品
            </el-button>
            <div v-if="selectedProducts.length > 0" style="margin-top: 10px;">
              <el-tag
                v-for="product in selectedProducts"
                :key="product.id"
                closable
                @close="handleRemoveProduct(product)"
                style="margin-right: 8px; margin-bottom: 8px;"
              >
                {{ product.name }}
              </el-tag>
            </div>
          </div>
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button @click="showCreateDialog = false">取消</el-button>
        <el-button type="primary" @click="handleSaveTask">保存</el-button>
      </template>
    </el-dialog>

    <!-- 任务详情对话框 -->
    <el-dialog v-model="showDetailDialog" title="盘点任务详情" width="1000px" destroy-on-close>
      <div v-if="currentTask">
        <!-- 基本信息 -->
        <el-descriptions :column="2" border>
          <el-descriptions-item label="任务单号">{{ currentTask.taskNo }}</el-descriptions-item>
          <el-descriptions-item label="任务名称">{{ currentTask.taskName }}</el-descriptions-item>
          <el-descriptions-item label="盘点类型">
            <el-tag :type="getTypeTagType(currentTask.type)">{{ getTypeName(currentTask.type) }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="任务状态">
            <el-tag :type="getStatusTagType(currentTask.status)">{{ getStatusName(currentTask.status) }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="盘点仓库">{{ currentTask.warehouseName }}</el-descriptions-item>
          <el-descriptions-item label="负责人">{{ currentTask.responsiblePerson }}</el-descriptions-item>
          <el-descriptions-item label="计划开始时间">{{ currentTask.planStartDate }}</el-descriptions-item>
          <el-descriptions-item label="计划结束时间">{{ currentTask.planEndDate }}</el-descriptions-item>
          <el-descriptions-item label="实际开始时间">{{ currentTask.actualStartDate || '-' }}</el-descriptions-item>
          <el-descriptions-item label="实际结束时间">{{ currentTask.actualEndDate || '-' }}</el-descriptions-item>
          <el-descriptions-item label="盘点进度">
            <el-progress :percentage="currentTask.progress" :status="currentTask.progress === 100 ? 'success' : ''" />
          </el-descriptions-item>
          <el-descriptions-item label="创建时间">{{ currentTask.createTime }}</el-descriptions-item>
          <el-descriptions-item label="任务说明" :span="2">{{ currentTask.remark || '-' }}</el-descriptions-item>
        </el-descriptions>

        <!-- 任务盈亏汇总 -->
        <el-divider content-position="left">
          <el-icon><TrendCharts /></el-icon>
          任务盈亏汇总
        </el-divider>
        <div class="task-summary-grid">
          <el-card shadow="hover" class="summary-card">
            <el-statistic title="盘点单数量" :value="currentTask.sheetCount || 0" suffix="张" />
          </el-card>
          <el-card shadow="hover" class="summary-card profit">
            <el-statistic title="盘盈金额" :value="currentTask.profitAmount || 0" prefix="+¥" />
          </el-card>
          <el-card shadow="hover" class="summary-card loss">
            <el-statistic title="盘亏金额" :value="Math.abs(currentTask.lossAmount || 0)" prefix="-¥" />
          </el-card>
          <el-card shadow="hover" class="summary-card net">
            <el-statistic title="净盈亏金额" :prefix="(currentTask.totalDiffAmount || 0) >= 0 ? '+¥' : '-¥'" :value="Math.abs(currentTask.totalDiffAmount || 0)" />
          </el-card>
        </div>

        <!-- 关联盘点单列表 -->
        <el-divider content-position="left">
          <el-icon><Memo /></el-icon>
          关联盘点单 ({{ currentTask.sheetCount || 0 }}张)
        </el-divider>
        <el-alert
          title="说明"
          type="info"
          :closable="false"
          style="margin-bottom: 12px;"
        >
          该任务下包含{{ currentTask.sheetCount || 0 }}张盘点单，任务盈亏金额为所有盘点单的汇总
        </el-alert>
        <div class="sheets-preview" v-if="(currentTask.sheetCount || 0) > 0">
          <el-tag 
            v-for="i in (currentTask.sheetCount || 0)" 
            :key="i"
            type="primary"
            size="large"
            style="margin: 4px;"
          >
            盘点单 {{ i }}
          </el-tag>
        </div>
        <el-empty v-else description="该任务暂无盘点单" :image-size="80" />
      </div>

      <template #footer>
        <el-button @click="showDetailDialog = false">关闭</el-button>
        <el-button type="primary" @click="$router.push(`/inventory/check-sheets?taskId=${currentTask.id}&taskNo=${currentTask.taskNo}`)">
          <el-icon><Memo /></el-icon>
          查看盘点单
        </el-button>
        <el-button type="success" @click="$router.push(`/inventory/profit-loss?taskId=${currentTask.id}`)">
          <el-icon><TrendCharts /></el-icon>
          查看盈亏
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  DocumentChecked, Plus, Document, Clock, Loading, CircleCheck,
  Search, Refresh, View, VideoPlay, Select, Edit, Close,
  TrendCharts, Memo
} from '@element-plus/icons-vue'

const router = useRouter()

// 状态
const showCreateDialog = ref(false)
const showDetailDialog = ref(false)
const showProductSelector = ref(false)
const taskFormRef = ref(null)
const currentTask = ref(null)
const filterStatus = ref('')
const selectedProducts = ref([])

// 搜索表单
const searchForm = reactive({
  taskNo: '',
  status: '',
  type: '',
  warehouseId: null
})

// 分页
const pagination = reactive({
  page: 1,
  pageSize: 20,
  total: 0
})

// 统计数据
const stats = reactive({
  total: 15,
  pending: 5,
  inProgress: 3,
  completed: 7
})

// 仓库数据
const warehouses = ref([
  { id: 1, name: '主仓库' },
  { id: 2, name: '分仓A' },
  { id: 3, name: '分仓B' },
  { id: 4, name: '次品仓' }
])

// 任务数据
const tasks = ref([
  {
    id: 1,
    taskNo: 'CHK202401150001',
    taskName: '2024年1月全盘任务',
    type: 'full',
    warehouseId: 1,
    warehouseName: '主仓库',
    status: 'inProgress',
    planStartDate: '2024-01-15 08:00:00',
    planEndDate: '2024-01-17 18:00:00',
    actualStartDate: '2024-01-15 08:30:00',
    actualEndDate: null,
    responsiblePerson: '张三',
    progress: 65,
    remark: '年度全盘任务',
    createTime: '2024-01-14 10:00:00',
    // 任务级别的汇总数据
    sheetCount: 5,                    // 该任务下的盘点单数量
    totalDiffAmount: -69498,          // 任务总盈亏金额（汇总所有盘点单）
    totalDiffQty: -12,                // 任务总盈亏数量
    profitAmount: 9495,               // 任务盘盈金额
    lossAmount: -78993                // 任务盘亏金额
  },
  {
    id: 2,
    taskNo: 'CHK202401140002',
    taskName: '高价值商品抽盘',
    type: 'sample',
    warehouseId: 1,
    warehouseName: '主仓库',
    status: 'completed',
    planStartDate: '2024-01-14 09:00:00',
    planEndDate: '2024-01-14 17:00:00',
    actualStartDate: '2024-01-14 09:15:00',
    actualEndDate: '2024-01-14 16:45:00',
    responsiblePerson: '李四',
    progress: 100,
    remark: '',
    createTime: '2024-01-13 15:00:00',
    // 任务级别的汇总数据
    sheetCount: 2,
    totalDiffAmount: 15600,
    totalDiffQty: 8,
    profitAmount: 18500,
    lossAmount: -2900
  },
  {
    id: 3,
    taskNo: 'CHK202401120003',
    taskName: '分仓A定期盘点',
    type: 'cycle',
    warehouseId: 2,
    warehouseName: '分仓A',
    status: 'pending',
    planStartDate: '2024-01-18 08:00:00',
    planEndDate: '2024-01-18 18:00:00',
    actualStartDate: null,
    actualEndDate: null,
    responsiblePerson: '王五',
    progress: 0,
    remark: '每周定期盘点',
    createTime: '2024-01-12 14:00:00',
    // 任务级别的汇总数据
    sheetCount: 0,
    totalDiffAmount: 0,
    totalDiffQty: 0,
    profitAmount: 0,
    lossAmount: 0
  }
])

// 任务表单
const taskForm = reactive({
  taskName: '',
  type: '',
  warehouseId: null,
  responsiblePerson: '',
  planStartDate: null,
  planEndDate: null,
  remark: '',
  scopeType: 'category'
})

// 表单验证规则
const taskRules = {
  taskName: [{ required: true, message: '请输入任务名称', trigger: 'blur' }],
  type: [{ required: true, message: '请选择盘点类型', trigger: 'change' }],
  warehouseId: [{ required: true, message: '请选择盘点仓库', trigger: 'change' }],
  responsiblePerson: [{ required: true, message: '请输入负责人', trigger: 'blur' }],
  planStartDate: [{ required: true, message: '请选择计划开始时间', trigger: 'change' }],
  planEndDate: [{ required: true, message: '请选择计划结束时间', trigger: 'change' }]
}

// 计算属性
const filteredTasks = computed(() => {
  let result = tasks.value

  if (filterStatus.value) {
    result = result.filter(task => task.status === filterStatus.value)
  }

  if (searchForm.taskNo) {
    result = result.filter(task => task.taskNo.includes(searchForm.taskNo))
  }

  if (searchForm.status) {
    result = result.filter(task => task.status === searchForm.status)
  }

  if (searchForm.type) {
    result = result.filter(task => task.type === searchForm.type)
  }

  if (searchForm.warehouseId) {
    result = result.filter(task => task.warehouseId === searchForm.warehouseId)
  }

  pagination.total = result.length
  return result
})

// 方法
const handleSearch = () => {
  pagination.page = 1
  ElMessage.success('搜索完成')
}

const handleReset = () => {
  Object.assign(searchForm, {
    taskNo: '',
    status: '',
    type: '',
    warehouseId: null
  })
  filterStatus.value = ''
  handleSearch()
}

const handlePageChange = () => {
  console.log('分页变化', pagination)
}

const handleViewTask = (task) => {
  currentTask.value = task
  showDetailDialog.value = true
}

const handleStartCheck = (task) => {
  ElMessageBox.confirm('确定要开始盘点吗？', '提示', {
    type: 'warning'
  }).then(() => {
    task.status = 'inProgress'
    task.actualStartDate = new Date().toLocaleString()
    ElMessage.success('已开始盘点')
  }).catch(() => {})
}

const handleCompleteCheck = (task) => {
  ElMessageBox.confirm('确定要完成盘点吗？', '提示', {
    type: 'warning'
  }).then(() => {
    task.status = 'completed'
    task.actualEndDate = new Date().toLocaleString()
    task.progress = 100
    ElMessage.success('盘点已完成')
  }).catch(() => {})
}

const handleEditTask = (task) => {
  currentTask.value = task
  Object.assign(taskForm, {
    taskName: task.taskName,
    type: task.type,
    warehouseId: task.warehouseId,
    responsiblePerson: task.responsiblePerson,
    planStartDate: task.planStartDate ? new Date(task.planStartDate) : null,
    planEndDate: task.planEndDate ? new Date(task.planEndDate) : null,
    remark: task.remark,
    scopeType: 'category'
  })
  showCreateDialog.value = true
}

const handleCancelTask = (task) => {
  ElMessageBox.confirm('确定要取消该盘点任务吗？', '提示', {
    type: 'warning'
  }).then(() => {
    task.status = 'cancelled'
    ElMessage.success('任务已取消')
  }).catch(() => {})
}

const handleSaveTask = () => {
  taskFormRef.value.validate((valid) => {
    if (valid) {
      if (currentTask.value) {
        // 更新
        Object.assign(currentTask.value, {
          taskName: taskForm.taskName,
          type: taskForm.type,
          warehouseId: taskForm.warehouseId,
          warehouseName: warehouses.value.find(w => w.id === taskForm.warehouseId)?.name,
          responsiblePerson: taskForm.responsiblePerson,
          planStartDate: taskForm.planStartDate.toLocaleString(),
          planEndDate: taskForm.planEndDate.toLocaleString(),
          remark: taskForm.remark
        })
        ElMessage.success('更新成功')
      } else {
        // 新建
        const newTask = {
          id: Date.now(),
          taskNo: 'CHK' + new Date().getTime(),
          ...taskForm,
          warehouseName: warehouses.value.find(w => w.id === taskForm.warehouseId)?.name,
          status: 'pending',
          planStartDate: taskForm.planStartDate.toLocaleString(),
          planEndDate: taskForm.planEndDate.toLocaleString(),
          actualStartDate: null,
          actualEndDate: null,
          progress: 0,
          createTime: new Date().toLocaleString()
        }
        tasks.value.unshift(newTask)
        stats.pending++
        stats.total++
        ElMessage.success('创建成功')
      }
      
      showCreateDialog.value = false
      currentTask.value = null
      resetForm()
    }
  })
}

const handleRemoveProduct = (product) => {
  const index = selectedProducts.value.findIndex(p => p.id === product.id)
  if (index > -1) {
    selectedProducts.value.splice(index, 1)
  }
}

const resetForm = () => {
  Object.assign(taskForm, {
    taskName: '',
    type: '',
    warehouseId: null,
    responsiblePerson: '',
    planStartDate: null,
    planEndDate: null,
    remark: '',
    scopeType: 'category'
  })
  selectedProducts.value = []
}

// 工具函数
const getStatusName = (status) => {
  const map = {
    pending: '待盘点',
    inProgress: '盘点中',
    completed: '已完成',
    cancelled: '已取消'
  }
  return map[status] || status
}

const getStatusTagType = (status) => {
  const map = {
    pending: 'warning',
    inProgress: '',
    completed: 'success',
    cancelled: 'info'
  }
  return map[status] || ''
}

const getTypeName = (type) => {
  const map = {
    full: '全盘',
    sample: '抽盘',
    cycle: '循环盘点',
    dynamic: '动态盘点'
  }
  return map[type] || type
}

const getTypeTagType = (type) => {
  const map = {
    full: 'danger',
    sample: 'warning',
    cycle: '',
    dynamic: 'success'
  }
  return map[type] || ''
}

const getDiffClass = (value) => {
  if (value > 0) return 'profit-text'
  if (value < 0) return 'loss-text'
  return ''
}

const handleViewSheets = (task) => {
  // 跳转到盘点单页面，并筛选该任务下的盘点单
  router.push(`/inventory/check-sheets?taskId=${task.id}&taskNo=${task.taskNo}`)
}
</script>

<style scoped>
.check-tasks-container {
  padding: 20px;
}

.header-card {
  margin-bottom: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-icon {
  color: #409EFF;
}

.header-text h2 {
  margin: 0;
  font-size: 24px;
  color: #303133;
}

.header-text p {
  margin: 4px 0 0 0;
  font-size: 14px;
  color: #909399;
}

.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

.stat-card {
  cursor: pointer;
  transition: all 0.3s;
}

.stat-card:hover {
  transform: translateY(-4px);
}

.stat-content {
  display: flex;
  align-items: center;
  gap: 20px;
}

.stat-info {
  flex: 1;
}

.stat-value {
  font-size: 28px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 14px;
  color: #909399;
}

.filter-card {
  margin-bottom: 20px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.option-with-desc {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.option-desc {
  font-size: 12px;
  color: #909399;
}

.diff-amount {
  font-weight: 600;
  font-size: 14px;
}

.profit-text {
  color: #67C23A;
}

.loss-text {
  color: #F56C6C;
}

.task-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 20px 0;
}

.summary-card {
  text-align: center;
  transition: all 0.3s;
}

.summary-card:hover {
  transform: translateY(-4px);
}

.summary-card.profit {
  border-top: 3px solid #67C23A;
}

.summary-card.loss {
  border-top: 3px solid #F56C6C;
}

.summary-card.net {
  border-top: 3px solid #409EFF;
}

.sheets-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
</style>

